import React, { useEffect, useState } from 'react';
import { Card, Row, Col, Statistic } from 'antd';
import { ShoppingOutlined, ShoppingCartOutlined, UserOutlined } from '@ant-design/icons';
import { getAllOrders } from '../../services/mockOrderService';
import { MOCK_USERS } from '../types/auth';

const Dashboard: React.FC = () => {
  const [orderCount, setOrderCount] = useState(0);

  // 获取订单数量
  useEffect(() => {
    const fetchOrderCount = async () => {
      try {
        const orders = await getAllOrders();
        setOrderCount(orders.length);
      } catch (error) {
        console.error('获取订单数量失败:', error);
      }
    };

    fetchOrderCount();
  }, []);

  return (
    <div>
      <h1>仪表盘</h1>
      <Row gutter={16}>
        <Col span={8}>
          <Card>
            <Statistic
              title="商品总数"
              value={50125}
              prefix={<ShoppingOutlined />}
            />
          </Card>
        </Col>
        <Col span={8}>
          <Card>
            <Statistic
              title="订单总数"
              value={orderCount}
              prefix={<ShoppingCartOutlined />}
            />
          </Card>
        </Col>
        <Col span={8}>
          <Card>
            <Statistic
              title="管理员数量"
              value={MOCK_USERS.length}
              prefix={<UserOutlined />}
            />
          </Card>
        </Col>
      </Row>
    </div>
  );
};

export default Dashboard; 